<template>
    <div id="lineChart" style="width: 700px; height: 700px"></div>
</template>

<script>
import * as echarts from 'echarts'
import { stationChaneByDay } from '../../../http/request'

export default {
  name: 'index.vue',
  data () {
    return {
      day: [],
      num: []
    }
  },
  mounted () {
    this.lineChart()
    stationChaneByDay().then(res => {
      for (let r in res.data) {
        console.log(res.data[r])
        this.day.push(res.data[r].day)
        this.num.push(res.data[r].num)
      }
      console.log(this.day),
      console.log(this.num),
      this.lineChart()
    })
  },
  methods: {
    lineChart () {
      let lineChart = echarts.init(document.getElementById('lineChart'))
      lineChart.setOption({
        title: {
          text: '单个站台月流量走势图'
        },
        xAxis: {
          name: '月/m',
          type: 'category',
          data: this.day
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.num,
          type: 'line',
          itemStyle: {
            color: '#5DC5E8'
          }
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>
